<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        .style1 {
            background: red;
        }

        .style2 {
            border: 1px solid green;
        }
    </style>
    <!--引入-->
    <script src="../static/jquery.js"></script>
    <script>
        window.onload = function () {
            function f1() {

            }

            function f2() {

            }
        };
        $(function () {
            function f1() {

            }

            function f2() {

            }

            $("#input1").change(function () {
                console.log("---输入框失去焦点");
            });
        });

        $(document).ready(function () {

        });
    </script>
</head>

<body>

<form action="" method="get">

</form>

<input id="input1" type="text">
<img id="img1" src="../static/img.png" height="200"/><br/>
<button id="btn">测试</button>
<button id="btn1">显示</button>

<div class="style2" id="div1">这是一段文字</div>
<script type="text/javascript">
    $("#btn").click(function () {
//addClass() 为元素class属性添加一个样式名
//         $("#div1").addClass("style1");
//removeClass() 删除元素class属性中指定的样式名
//         $("#div1").removeClass("style2");
//toggleClass 从元素的class属性中添加/移除指定的样式名
//         $("#div1").toggleClass("style2");

        // $("#div1").html('<img id="img1" src="../static/img.png" height="200"/><br/>')

        // var position = $("#input1").position();
        // console.log(position)

        // let e =  $('<img id="img1" src="../static/img.png" height="200"/>')
        // $("body").append('<img id="img1" src="../static/img.png" height="200"/>')
        // e.appendTo($("body"))
        // $("#img1").before(e)
        // e.insertBefore( $("#img1"))
        // $("body").remove()

        //node1.wrap(node2) : 使用node2将node1包裹起来
        // $("#img1").wrap("<div style='border:2px pink solid'></div>")

        //ajax 发送异步请求
        // $.ajax({
        //     // 类型
        //     type: 'get',
        //     // url
        //     url: 'https://api.apiopen.top/api/sentences',
        //     // 参数
        //     data: '',
        //     // 响应类型
        //     dataType: 'json',
        //     // 响应回调
        //     success: function (res) {
        //         console.log(res)
        //     }
        // })

        let data = {
            account: "309324904@qq.com",
            password: "123456"
        }

        $.ajax({
            // 类型
            type: 'post',
            // url
            url: 'https://api.apiopen.top/api/login',
            // 参数
            // data: data,
            data: 'account=309324904@qq.com&password=123456',
            // 响应类型
            dataType: 'json',
            // 响应回调
            success: function (res) {
                console.log(res)
            }
        })


    });
</script>


<script type="text/javascript">
    //点击按钮隐藏图片
    $("#btn").click(function () {
        // $("#img1").hide();

        var attr = $("#img1").attr("src", "../static/img_1.png");
        console.log(attr)

        // val()
        var val = $("#input1").val();
        console.log(val)


    });
    $("#btn1").click(function () {
        $("#img1").show();
    });

    // var btn = document.getElementById("btn");
    // btn.onclick = function () {
    //     console.log(123)
    // };
</script>
</body>

</html>